<template>
  <a-card>
    <!-- :columns="$toI18nFormat(columns)" -->
    <a-table
      ref="tableRef"
      :columns="columns"
      row-key="comment.id"
      :data-source="dataList"
      :pagination="false"
      @expand="onExpand"
    >
      <!-- v-for="(item, index) in $toI18nFormat(columns)" -->
      <span slot="type" slot-scope="text">
        <a-tag color="green">
          {{ text }}
        </a-tag>
      </span>
      <template slot="expandedRowRender" slot-scope="record, index">
        <!-- 这里可以放置加载中的占位符 -->
        <div class="flex justify-center" v-if="loadingKeys.includes(record.comment.id)">
          <a-spin tip="加载中..." />
        </div>
        <!-- 数据加载完毕后显示的内容 -->
        <p v-else>
          <commentBeanListFormVue
            :record="record"
            :index="index"
            :key="index"
          />
        </p>
      </template>
      <!-- <template slot="expandIcon" slot-scope="props">
        <a-icon :type="props.record.loading ? 'loading' : props.expanded ? 'down' : 'right'" @click="(event) => onExpand(event, props)" />
      </template> -->
    </a-table>
  </a-card>
</template>

<script>
import commentBeanListFormVue from "./commentBeanListForm.vue";

const columns = [
  {
    title: "审核环节",
    dataIndex: "activityName",
    key: "activityName",
    align: "left",
    langCode: "auditPhase",
  },
  {
    title: "审核人",
    dataIndex: "userName",
    key: "userName",
    align: "left",
    langCode: "ReviewedBy",
  },
  {
    title: "审核类型",
    dataIndex: "comment.type",
    key: "type",
    align: "left",
    scopedSlots: {
      customRender: "type",
    },
    langCode: "AuditType",
  },
  {
    title: "审核意见",
    dataIndex: "comment.message",
    key: "message",
    align: "left",
    langCode: "ReviewComments",
  },
  {
    title: "审核时间",
    dataIndex: "comment.time",
    key: "time",
    sorter: false,
    align: "left",
    langCode: "AuditTime",
  },
];
export default {
  components: {
    commentBeanListFormVue,
  },
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    commentParams: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      columns,
      expandedRowKeys: [],
      loadingKeys: [],
    };
  },
  methods: {
    onExpand(expanded, record) {
      if (expanded) {
        this.loadFormData(record);
      }
    },
    loadFormData(record) {
      const key = record.comment.id;
      const type = record.comment.type;
      if (!record.loaded) {
        this.setTableItemLoading(key, true);
        this.loadData(record.activityId, type)
          .then((res) => {
            const parse = this.parseFormData(res.data);
            record.formData = parse;
            record.loaded = true;
          })
          .catch((err) => {
            record.loaded = false;
          })
          .finally(() => {
            setTimeout(() => {
              this.setTableItemLoading(key, false);
            }, 300);
          });
      }
    },
    loadData(activityId, type) {
      // 加载更多数据的逻辑
      return new Promise((resolve, reject) => {
        const { modelKey, procdefId, businessKey, processInstanceId } = this.commentParams || {};
        this.$get(
          `/workflow/flowModel/getCommentForm?modelKey=` +
            `${modelKey}&procdefId=${procdefId}&businessKey=${businessKey}&activityId=${activityId}&processInstanceId=${processInstanceId}&nodeButtonName=${type}`
        )
          .then((res) => {
            if (res.statusCode && res.statusCode != 200) {
              this.$message.warning(res.message || "操作失败");
              reject();
            } else {
              resolve(res);
            }
          })
          .catch((err) => {
            this.$message.warning(err.message || "操作失败");
            reject();
          });
      });
    },
    // 解析表单数据
    parseFormData(data = {}) {
      // const
      const formData = {};
      const {
        masterFormConfig = null,
        masterFormData = null,
        slaveFormConfig = null,
        slaveFormData = null,
      } = data;
      if (masterFormConfig && masterFormData) {
        const drawingList = this.parseFormItems(masterFormConfig);
        if (Array.isArray(drawingList.list)) {
          this.parseData(drawingList.list, masterFormData);
          formData.masterFormData = drawingList;
        } else {
          formData.masterFormData = {};
        }
      } else {
        formData.masterFormData = {};
      }
      if (slaveFormConfig && slaveFormData) {
        const drawingList = this.parseFormItems(slaveFormConfig);
        if (Array.isArray(drawingList.list)) {
          this.parseData(drawingList.list, slaveFormData);
          formData.slaveFormData = drawingList;
        } else {
          formData.slaveFormData = {};
        }
      } else {
        formData.slaveFormData = {};
      }

      return formData;
    },
    parseFormItems(json) {
      const designJson = json?.formDesign?.designJson || "";
      let drawingList = {};
      if (designJson) {
        try {
          drawingList = JSON.parse(designJson);
        } catch (error) {}
      }
      return drawingList;
    },
    parseData(formList, formData) {
      if (Array.isArray(formList)) {
        formList.forEach((item) => {
          const model = item.model;
          if (formData.hasOwnProperty(model)) {
            const value = formData[model];
            item.options.disabled = true;
            if(item?.options && item?.options.hasOwnProperty("defaultValue")) {
              item.options.defaultValue = value;
            }
          }
        });
      }
    },
    // parseData(formList, formData) {
    //   console.log("formList", formList);
    //   const data = {};
    //   if (Array.isArray(formList)) {
    //     formList.forEach((item) => {
    //       const label = item.label;
    //       const model = item.model;
    //       if (formData.hasOwnProperty(model)) {
    //         const value = formData[model];
    //         data[model] = {
    //           label,
    //           value,
    //         };
    //         item.options?.defaultValue = value;
    //       }
    //     });
    //   }
    //   return data;
    // },
    setTableItemLoading(key, bool = false) {
      if (bool) {
        this.setLoadingKeys(key);
      } else {
        this.removeLoadingKeys(key);
      }
    },
    setLoadingKeys(key) {
      if (this.loadingKeys.includes(key)) return;
      this.loadingKeys.push(key);
    },
    removeLoadingKeys(key) {
      if (this.loadingKeys.includes(key)) {
        this.loadingKeys = this.loadingKeys.filter((item) => item !== key);
      }
    },
  },
};
</script>

<style lang="scss" scoped>

</style>